<!DOCTYPE html>
<html lang="en">

    <head>

        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Bootstrap Login Form Template</title>

        <!-- CSS -->
        <!-- <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Roboto:400,100,300,500"> -->
        <link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css">
        <link rel="stylesheet" href="assets/font-awesome/css/font-awesome.min.css">
		<link rel="stylesheet" href="assets/css/form-elements.css">
        <link rel="stylesheet" href="assets/css/style.css">

        <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
        <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
        <!--[if lt IE 9]>
            <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
            <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
        <![endif]-->

        <!-- Favicon and touch icons -->
        <link rel="shortcut icon" href="assets/ico/favicon.png">
        <link rel="apple-touch-icon-precomposed" sizes="144x144" href="assets/ico/apple-touch-icon-144-precomposed.png">
        <link rel="apple-touch-icon-precomposed" sizes="114x114" href="assets/ico/apple-touch-icon-114-precomposed.png">
        <link rel="apple-touch-icon-precomposed" sizes="72x72" href="assets/ico/apple-touch-icon-72-precomposed.png">
        <link rel="apple-touch-icon-precomposed" href="assets/ico/apple-touch-icon-57-precomposed.png">

    </head>

    <body>

        <!-- Top content -->
        <div class="top-content">

            <div class="">
                <div class="container">
                    <div class="row">
                        <div class="col-sm-8 col-sm-offset-2 text">
                            <h1><strong>人脸识别</strong>登陆</h1>
                            <div class="description">
                            	<p>
	                            	请在光线清晰的条件按下录入——<a href="#"><strong>已有注册过请登陆</strong></a>
                            	</p>
                            </div>
                        </div>
                    </div>
                    <div class="row col-sm-6 col-sm-offset-3 text" >

                        <video style="border-radius: 500px;border: 2px solid #8AC007;" id="video" width="250px" height="250px" autoplay="autoplay"></video>
<canvas id="canvas" width="500px" height="500px" hidden="hidden"></canvas>


                    </div>
<!--                    <div class="row">-->
<!--                        <div class="col-sm-6 col-sm-offset-3 social-login">-->
<!--                        	 <form role="form" action="" method="post" class="login-form">-->
<!--                                    <div class="form-group">-->
<!--                                        <label class="sr-only" for="form-username">用户名</label>-->
<!--                                        <input type="text" name="form-username" placeholder="请输入用户名..." class="form-username form-control" id="form-username">-->
<!--                                    </div>-->
<!--                                    <button type="submit" class="btn">确认注册</button>-->
<!--                            </form>-->
<!--                        </div>-->
<!--                    </div>-->
                </div>
            </div>

        </div>



        <!-- Javascript -->
        <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>

        <script src="assets/js/jquery-1.11.1.min.js"></script>
        <script src="assets/bootstrap/js/bootstrap.min.js"></script>
        <script src="assets/js/jquery.backstretch.min.js"></script>
        <script src="assets/js/scripts.js"></script>
        <script>
            let timer;
    //获得video摄像头区域
    let video = document.getElementById("video");
    window.addEventListener(
        "DOMContentLoaded",
        function getMedia() {
            let constraints = {
                video: {width: 500, height: 500},
                audio: true
            };
            /*
            这里介绍新的方法:H5新媒体接口 navigator.mediaDevices.getUserMedia()
            这个方法会提示用户是否允许媒体输入,(媒体输入主要包括相机,视频采集设备,屏幕共享服务,麦克风,A/D转换器等)
            返回的是一个Promise对象。
            如果用户同意使用权限,则会将 MediaStream对象作为resolve()的参数传给then()
            如果用户拒绝使用权限,或者请求的媒体资源不可用,则会将 PermissionDeniedError作为reject()的参数传给catch()
            */
            let promise = navigator.mediaDevices.getUserMedia(constraints);
            promise.then(function (MediaStream) {
                video.srcObject = MediaStream;
                video.play();
                timer = window.setInterval("takePhoto()",1000);
            }).catch(function (PermissionDeniedError) {
                console.log(PermissionDeniedError);
            })
        },
        false
        );
    function takePhoto() {
        //获得Canvas对象
        let canvas = document.getElementById("canvas");
        let ctx = canvas.getContext('2d');
        ctx.drawImage(video, 0, 0);
        let img_base64 = canvas.toDataURL("image/png");
        code_base64 = img_base64.split(',');
        console.log (code_base64[1]);
            $.ajax({
                url:'https://aip.baidubce.com/rest/2.0/face/v3/search?access_token=24.05506ccf760a569feab8db11623f3abd.2592000.1575028245.282335-17655547',//地址
                dataType:'json',//数据类型
                type:'POST',//类型
                timeout:200000,//超时
                data:{
                    image_type:'BASE64',
                    group_id_list:'me',
                    image:code_base64[1]
                },
                //请求成功
                success:function(data,status){
                    // alert(data);
                    console.log(data)
                    if (data.error_msg ==='SUCCESS') {
                        window.clearInterval(timer);
                        window.location='index.html?user_id='+data.result.user_list[0].user_id;
                    }

                    //alert(status);
                },
                //失败/超时
                error:function(XMLHttpRequest,textStatus,errorThrown){
                    // if(textStatus==='timeout'){
                    //     alert('請求超時');
                    //     setTimeout(function(){
                    //         alert('重新请求');
                    //     },2000);
                    // }
                    //alert(errorThrown);
                }
        });
    }
</script>
        <!--[if lt IE 10]>
            <script src="assets/js/placeholder.js"></script>
        <![endif]-->

    </body>

</html>